<template>
  <div>
    <div v-if="!isUniFrameWork">
      <div
        class="rich-text"
        v-html="formatedContent"
      />
      <div v-if="image" class="rich-image-previewer" @click="closeImage">
        <img
        class="rich-image-preview"
        :style="{
          transform: `scale(1) rotate(0deg)`,
        }"
        :src="imageSrc"
        />
        
      </div>	
    </div>
    <div v-else>
      <!-- <mpHtml :content="formatedContent"/> -->
    </div>
  </div>
	
  
</template>

<script lang="ts">
import vue  from '../adapter-vue';
import { marked } from 'marked';
import { customerServicePayloadType } from '../interface';
import {isUniFrameWork,isWeChat} from '../utils/env';
// import mpHtml from './common/RichText/dist/uni-app/components/mp-html/mp-html.vue';
const { computed,ref } = vue;
interface Props {
  payload: customerServicePayloadType;
}
export default {
  components: {
    // mpHtml
  },
  props: {
    payload: {
      type: Object as () => customerServicePayloadType,
      default: () => ({}),
    },
  },
  setup(props: Props) {
    const image = ref(false);
    const imageSrc = ref('');
    const imageList = [];
    const formatedContent = computed(() => {
      const rendererMD = new marked.Renderer();
    marked.setOptions({
      renderer: rendererMD,
      gfm: true,
      breaks: true,
      pedantic: false,
      sanitize: false,
      smartLists: true,
      smartypants: false,
    });
    if(!isUniFrameWork){
      window.handleImageClick = function(e,href:string) {
        image.value = !image.value;
        imageSrc.value = href; 
      
      }
    }
      
      rendererMD.image = (href, title, text) => {
        if(isUniFrameWork){
          return `
          <img src="${href}" alt="${text}" style="max-width: 100%;">
        `
        }
        return `
          <div onclick="handleImageClick(event,'${href}')">
            <img src="${href}" alt="${text}" style="max-width: 100%;">
          </div>
        `
      }
      let richtext = marked.parse(props.payload.content);
      return richtext;
    });

    const closeImage = () => {
      image.value = !image.value;
      imageSrc.value = '';
    }


    return {
      props,
      formatedContent,
      image,
      imageSrc,
      closeImage,
      isUniFrameWork,
      imageList
    };
  },
};
</script>
<style lang="scss">
.rich-text {
  div,
  ul,
  ol,
  dt,
  dd,
  li,
  dl,
  h1,
  h2,
  h3,
  h4,
  p,
  img,
  a {
    max-width: 100%;
  }

  a {
    color: blue;
  }
}

.rich-image-previewer {
  position: fixed;
  z-index: 101;
  width: 100vw;
  height: 100vh;
  background: rgba(#000, 0.3);
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  user-select: none;
}

.rich-image-preview {
  width: 80%;
  height:auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: transform 0.1s ease 0s;
  pointer-events: auto;
}

</style>
